<template>
	<view>
		<view>
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem"
				styleType="text"></uni-segmented-control>
			<view>
				<view v-if="current === 0">
					<view class="" v-if="pedingList.length>0" v-for="(item,index) in pedingList" :key="item.id">
						<view style="display: flex;" >
							<uni-section class="mb-10" :title="item.className" type="line"></uni-section>
							<uni-icons v-if="item.iconShow" type="top" size="20"
								style="position: absolute; right: 5%; z-index: 999999; margin-top: 20rpx;"
								@click="showHistory(item)"></uni-icons>
							<uni-icons v-else type="bottom" size="20"
								style="position: absolute; right: 5%; z-index: 999999; margin-top: 20rpx;"
								@click="shawHistory(item)"></uni-icons>
						</view>

						<uni-card  v-for="(e,index1) in item.leaveApplyData" @click="popupShow(JSON.stringify(e),1)" :key="e.id" :title="e.studentName"  >
							<uni-row>
								<uni-col :span="24">
									<view class="" style="font-size: 30rpx; ">
										开始时间:
										<span>{{e.startDate}}</span>
									</view>
								</uni-col>
							</uni-row>
							<uni-row>
								<uni-col :span="24">
									<view class="" style="font-size: 30rpx;">
										结束时间:
										<span>{{e.endDate}}</span>
									</view>
								</uni-col>
							</uni-row>
							<uni-row>
								<uni-col :span="24">
								<view class="" style="font-size: 30rpx;">
									<view v-if="e.status == 0">
										处理状态:<span style="background-color: #ff4500; color: white;">处理中</span>
									</view>
									<view v-if="e.status == 1">
										处理状态:<span style="background-color: #008000; color: white;">通过</span>
									</view>
									<view v-if="e.status == 2">
										处理状态:<span style="background-color: #ff0000; color: white;">拒绝</span>
									</view>
									<view v-if="e.status == 3">
										处理状态:<span style="background-color: grey; color: white;">审批过期</span>
									</view>
									<view v-if="e.status == 4">
										处理状态:<span style="background-color: gray; color: white;">已销假</span>
									</view>
									<view v-if="e.status == 5">
										处理状态:<span style="background-color: #ff4500; color: white;">销假中</span>
									</view>
								</view>
								</uni-col>
							</uni-row>
						</uni-card>
					</view>
					<view class="" style="position: absolute; left: 10%; top: 20%;" v-if="pedingList.length <= 0">
						<image src="https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/wujilu.png" mode=""></image>
					</view>
				</view>
			</view>
			<view v-if="current === 1">
				<view class="" v-if="pedingList.length>0" v-for="(item,index) in pedingList" :key="item.id">
					<view style="display: flex;">
						<uni-section class="mb-10" :title="item.className" type="line"></uni-section>
						<uni-icons v-if="item.iconShow" type="top" size="20"
							style="position: absolute; right: 5%; z-index: 999999; margin-top: 20rpx;"
							@click="showHistory(item)"></uni-icons>
						<uni-icons v-else type="bottom" size="20"
							style="position: absolute; right: 5%; z-index: 999999; margin-top: 20rpx;"
							@click="shawHistory(item)"></uni-icons>
					</view>


					<view v-if="item.show">
						<uni-card  v-for="(e,index1) in item.leaveApplyData" @click="popupShow(JSON.stringify(e),2)" :key="e.id" :title="e.studentName"  >
							<uni-row>
								<uni-col :span="24">
									<view class="" style="font-size: 30rpx; ">
										开始时间:
										<span>{{e.startDate}}</span>
									</view>
								</uni-col>
							</uni-row>
							<uni-row>
								<uni-col :span="24">
									<view class="" style="font-size: 30rpx;">
										结束时间:
										<span>{{e.endDate}}</span>
									</view>
								</uni-col>
							</uni-row>
							<uni-row>
								<uni-col :span="24">
								<view class="" style="font-size: 30rpx;">
									<view v-if="e.status == 0">
										处理状态:<span style="background-color: #ff4500; color: white;">处理中</span>
									</view>
									<view v-if="e.status == 1">
										处理状态:<span style="background-color: #008000; color: white;">通过</span>
									</view>
									<view v-if="e.status == 2">
										处理状态:<span style="background-color: #ff0000; color: white;">拒绝</span>
									</view>
									<view v-if="e.status == 3">
										处理状态:<span style="background-color: grey; color: white;">审批过期</span>
									</view>
									<view v-if="e.status == 4">
										处理状态:<span style="background-color: gray; color: white;">已销假</span>
									</view>
									<view v-if="e.status == 5">
										处理状态:<span style="background-color: #ff4500; color: white;">销假中</span>
									</view>
								</view>
								</uni-col>
							</uni-row>
						</uni-card>
					</view>
				</view>


				<view class="" style="position: absolute; left: 10%; top: 20%;" v-if="pedingList.length <= 0">
					<image src="https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/wujilu.png" mode=""></image>
				</view>
			</view>
			<!-- 弹框 -->
			<uni-popup ref="popup" type="bottom">
				<view style="width: 100%; background-color: #fff; padding: 20rpx; ">
					<uni-row >
						<view class="" style="height:  60rpx;line-height: 60rpx; text-align: center; font-size: 36rpx;">请假申请</view>
					</uni-row>
					<uni-row>
						<uni-col :span="10">
							<view style="height: 60rpx;line-height: 60rpx;">姓名</view>
						</uni-col>
						<uni-col :span="14">
							<view style="height: 60rpx;line-height: 60rpx;">{{studentName}}</view>
						</uni-col>
					<!-- 	<view class="" style="display: flex; padding: 20rpx 0; align-items: center; margin-top: 20rpx;">
							<view style="width: 30%;">姓名</view>
							<view style="font-weight: 400;">{{identity.studentName}}</view>
						</view> -->
					</uni-row>
					<uni-row>
						<uni-col :span="10">
							<view style="height: 60rpx;line-height: 60rpx;">班级</view>
						</uni-col>
						<uni-col :span="14">
							<view style="height: 60rpx;line-height: 60rpx;">{{className}}</view>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col :span="10">
							<view style="height: 60rpx;line-height: 60rpx;">请假开始时间</view>
						</uni-col>
						<uni-col :span="14">
							<view style="height: 60rpx;line-height: 60rpx;">{{startDate}}</view>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col :span="10">
							<view style="height: 60rpx;line-height: 60rpx;">请假结束时间</view>
						</uni-col>
						<uni-col :span="14">
							<view style="height: 60rpx;line-height: 60rpx;">{{endDate}}</view>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col :span="10">
							<view style="height: 60rpx;line-height: 60rpx;">请假类型</view>
						</uni-col>
						<uni-col :span="14">
							<view style="height: 60rpx;line-height: 60rpx;">{{leaveTypeLabel}}</view>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col :span="10">
							<view style="height: 60rpx;line-height: 60rpx;">请假原因</view>
						</uni-col>
						<uni-col :span="14">
							<view style="height: 60rpx;line-height: 60rpx;">{{leaveReason}}</view>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col :span="10">
							<view style="height: 60rpx;line-height: 60rpx;">处理状态</view>
						</uni-col>
						<uni-col :span="14">
							<view style="height: 60rpx;line-height: 60rpx;">
								<span v-if="status==0" style="color: orangered;font-size: 50rpx;">处理中</span>
								<span v-if="status==1" style="color: green;font-size: 50rpx;">通过</span>
								<span v-if="status==2" style="color: red;font-size: 50rpx;">拒绝</span>
								<span v-if="status==3" style="color: olivedrab;">审批过期</span>
								<span v-if="status==4" style="color: olivedrab;">已销假</span>
								<span v-if="status==5" style="color: olivedrab;">销假</span>
							</view>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col>
							<view v-if="buttonShow" class="" style="display: flex; padding: 20rpx 0; align-items: center;">
								<view style="width: 30%;">处理</view>
								<radio-group @change="checkFlag">
									<view class="" style="display: flex;">
										<view v-if="radioShow" class="radio" style="padding:10rpx 0rpx; margin-right: 50rpx;">
											<radio :disabled="left" :checked="flag == 1" style="margin-right: 10rpx;" value="1" /><text
												style="font-size: 28rpx;">通过</text>
										</view>
										<view class="radio" style="padding:10rpx 0rpx;">
											<radio :checked="flag == 2" style="margin-right: 10rpx;" value="2" /><text
												style="font-size: 28rpx;">驳回</text>
										</view>
									</view>
								</radio-group>
							</view>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col>
						  <view v-if="!radioShow && buttonShow" style="text-align: center; color: red;">该请假单已经超时，只能驳回</view>	
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col>
							<view class="tijiao" v-if="buttonShow" type="primary" @click="submit">提交</view>
						</uni-col>
					</uni-row>
				</view>
			</uni-popup>
			
			<view>
					<!-- 提示窗示例 -->
					<uni-popup ref="alertDialog" type="dialog">
						<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="同意" title="是否同意销假?" @confirm="dialogConfirm"
							@close="dialogClose">
							<text>{{this.contentMsg}}</text>
							</uni-popup-dialog>
					</uni-popup>
				</view>
		</view>
	</view>
	</view>
</template>

<script>
	import studentWork from "@/api/modules/studentWork.js"
	import {
		parseTime
	} from "@/utils/date.js"
	export default {
		data() {
			return {
				topName: "待审批请假",
				userName: "",
				current: 0,
				items: ['待审批请假', '处理记录'],
				identity: null,
				leaveTypeList: [{
					text: "事假",
					value: "1",
				}, {
					text: "病假",
					value: "2"
				}],
				historyList: [],
				startDate: "",
				endDate: "",
				leaveReason: "",
				clsTeacherId: undefined,
				pedingList: [],
				studentName: "",
				className: "",
				leaveTypeLabel: "",
				flag: "",
				id: "",
				buttonShow: false,
				status: "",
				statusShow: false,
				radioShow: true,
				left: false,
				right: false,
				msgType: '',
				contentMsg: '',
				templateId: "SjcJBrQH_ildMhxf72D3hIqVuVvxqmtlCyU_b",
				
				//系统当前时间前两天（不含时间）
				previousDayString:undefined,
				//系统当前时间（不含时间）
				nowString:undefined,
			}
		},
		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
				if (e.currentIndex == 0) {
					this.getPendHistoryList()
				} else if (e.currentIndex == 1) {
					this.getAllHistoryList()
				}
			},
			getPendHistoryList() {
				studentWork.getStuLeaveApplyByClsTeacherId({
					clsTeacherId: this.clsTeacherId,
					status: "0",
				}).then(res => {
					console.log(res.data);
					
					var now = new Date();
					var previousDay = new Date(now);
					previousDay.setDate(now.getDate() - 7)
					//将时间格式转换为YYYY-MM-DD
					this.previousDayString = previousDay.toISOString().slice(0,10);
					this.nowString = now.toISOString().slice(0,10);
					
					this.pedingList = res.data
					this.pedingList.forEach(item => {
						this.$set(item, "show", true)
						this.$set(item, "iconShow", true)
					})
				})
			},
			getAllHistoryList() {
				studentWork.getStuLeaveApplyByClsTeacherId({
					clsTeacherId: this.clsTeacherId,
					status: "-1",
				}).then(res => {
					this.pedingList = res.data
					this.pedingList.forEach(item => {
						this.$set(item, "show", true)
						this.$set(item, "iconShow", true)
					})
					console.log(this.pedingList)
				})
			},


			popupShow(e, count) {	
				
				e = JSON.parse(e)
				if (e.status == 3) {
					uni.showToast({
						title: "过期数据，无法操作！！！",
						icon: "none",
					})
					return;
				}

				if (e.status == 5) {
					this.id = e.id
					this.msgType = 'error'
					this.contentMsg = '是否同意销假!'
					this.$refs.alertDialog.open()
					return;
				}

				this.left = false
				this.right = false

				console.log(e)
				if (count == 2) {
					this.buttonShow = false
					this.statusShow = true
				} else if (count == 1) {
					this.flag = "";
					this.buttonShow = true
					this.statusShow = false

					const now = new Date();
					const today = new Date(now.getFullYear(), now.getMonth(), now.getDate(),now.getHours(),now.getMinutes(),now.getSeconds());
					// const targetTime = new Date(today.getTime() + (17 * 60 * 60 * 1000));
					const beginTime = new Date(e.startDate+" 00:00:00")
					const targetTime = new Date(beginTime.getTime() + (22 * 60 * 60 * 1000));
					console.log(beginTime)
					console.log(today)
					console.log(targetTime)
					if (now >= targetTime) {
						uni.showToast({
							title: "当前时间已经过了22:00,不允许通过请假",
							icon: "none",
						})
						this.radioShow = false
						this.left = true
						this.right = true

						return;
					} else {
						this.flag = ""
						this.radioShow = true
					}

					// if (new Date(this.startDate + " 22:00").getTime() < Date.now()) {
					// 	uni.showToast({
					// 		title: "当前时间已经过了22:00,不允许通过请假",
					// 		icon: "none",
					// 	})
					// 	this.radioShow = false
					// 	this.left = true
					// 	this.right = true
					// } else {
					// 	this.radioShow = true
					// }
				}

				this.studentName = e.studentName
				this.className = e.className
				this.startDate = e.startDate
				this.endDate = e.endDate
				this.leaveTypeLabel = e.leaveTypeLabel
				this.leaveReason = e.leaveReason
				this.id = e.id
				this.status = e.status
				this.$refs.popup.open()


				// // 将毫秒转换为Date对象
				// var dateObject = new Date(Date.parse(this.endDate));


				// console.log(111)
				// console.log(dateObject)
				// console.log(dateObject > new Date())

			},
			checkFlag(e) {
				console.log(e)
				console.log(e.detail.value)
				this.flag = e.detail.value
			},
			showHistory(item) {
				item.show = false
				item.iconShow = false
			},
			shawHistory(item) {
				item.show = true
				item.iconShow = true
			},
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				console.log('点击确认')
				this.messageText = `点击确认了 ${this.msgType} 窗口`
				studentWork.cancelStudentLeaveApply({
					id: this.id
				}).then(res => {
					console.log(res)
					if (res.code == 200) {
						uni.showToast({
							title: "撤销成功",
							icon: 'none',
						})
					}
					this.getPendHistoryList()

				}).catch(error => {
					console.log(error);
					if (error.data.code == 501) {
						uni.showToast({
							title: error.data.message,
							icon: 'error',
						})
					}

					if (error.data.code == 502) {
						uni.showToast({
							title: error.data.message,
							icon: 'error',
						})
					}
				})
				this.$refs.popup.close()
				this.id = ""
				this.flag = ""
				this.getPendHistoryList()
				this.$refs.message.open()
			},
			dialogClose() {
				console.log('点击关闭')
			},
			submit() {
			    console.log("处理状态",this.flag)
				if (!this.flag) {
					uni.showToast({
						title: "请选择处理",
						icon: "none",
					})
					return;
				}

				studentWork.updateStuLeaveApplyStatus({
					id: this.id,
					status: this.flag,
					rejectReason: "",
				}).then(res => {
					console.log(res)
					if (res.code == 200) {
						uni.showToast({
							title: "提交成功",
							icon: 'none',
						})
					}
					this.getPendHistoryList()

				}).catch(error => {
					console.log(error);
					if (error.data.code == 501) {
						uni.showToast({
							title: error.data.message,
							icon: 'error',
						})
					}

					if (error.data.code == 502) {
						uni.showToast({
							title: error.data.message,
							icon: 'error',
						})
					}
				})
				this.$refs.popup.close()
				this.id = ""
				this.flag = ''
				this.getPendHistoryList()

			},
		},

		onLoad() {
			// wx.getSetting({
			// 	withSubscriptions: true,
			// 	success: (res) => {
			// 		const subscriptions = res.subscriptionsSetting;
			// 		console.log(res)
			// 		if (subscriptions && subscriptions[this.templateId] == 'accept') {
			// 			// 用户已经授权订阅了该模板消息
			// 			// this.subscribed = true;
			// 			console.log("用户已经授权订阅了该模板消息")
			// 		} else {
			// 			// 用户未授权订阅该模板消息
			// 			// this.subscribed = false;
			// 			// 弹出订阅窗口
			// 			// this.wxSubscribeMessage()
			// 			// this.shareToggle()
			// 			console.log("用户未授权订阅该模板消息")
			// 			uni.showModal({
			// 				title: '提示', // 标题
			// 				content: '确定是否订阅?', // 提示内容
			// 				cancelText: "取消", // 取消按钮的文字
			// 				confirmText: "确认", // 确认按钮的文字
			// 				showCancel: true, // 是否显示取消按钮，默认为 true
			// 				success: (res) => {
			// 					if (res.confirm) {
			// 						this.$appletAuthorize()
			// 					} else {

			// 					}
			// 				}
			// 			});
			// 		}
			// 	},
			// 	fail: (err) => {
			// 		console.error('wx.getSetting error:', err);
			// 	}
			// });


			this.clsTeacherId = JSON.parse(uni.getStorageSync("loginId"))
			this.userName = uni.getStorageSync("userName")
			this.getPendHistoryList()
			this.currentTime = new Date(); // 获取当前时间
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.indexContent {
		height: 100vh;
	}

	.box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		border-bottom: 0.1px solid #f6f7fc;
		font-size: 28rpx;
	}

	.topBox {}


	.tijiao {
		margin-top: 20rpx;
		width: 90%;
		background-color: #3333d3;
		padding: 20rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #fff;
		font-size: 40rpx;
		box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
	}
</style>